<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站简易导航栏</title>
    <style>
        ul > li {
            list-style-type: none;
            display: block;
            width: 180px;
            float: left;
            /*padding-left: 120px;*/
            text-align: center;
            background-color: silver;
        }

        li:hover{
            background-color: blue;
        }

        .active{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in contents"><a v-on:click="itemClicked(index)" v-bind:class="{active: index === currentIndex}" href="https://www.baidu.com">{{ item }}</a></li>
        <br>
        <li v-for="(item, index) in contents" ><a v-on:click="itemClicked(index)" v-bind:class="{active: index === currentIndex}" v-bind:href="urls[index]">{{ item }}</a></li>
    </ul>

<!--    针对同时需要显示内容和处理url等类似问题，可以考虑的解决方案是：-->
<!--    1、创建二维数组，每行的内容是 显示文字和链接-->
<!--    2、创建一个对象数组，数组中每个元素的内容为 显示的文字和链接。-->

</div>
<script src="../../../../../js/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                contents: ["首页", "网页特效", "精品脚本", "JSP", "Spring", "PHP"],
                urls:["https://www.baidu.com","https://www.baidu.com","https://www.baidu.com","https://www.baidu.com","https://www.baidu.com","https://www.baidu.com"],
                currentIndex: null,
            }
        },
        methods: {
            itemClicked(index){
                this.currentIndex = index
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>